<template>
    <div id="dashboard_chart">
        <el-row :gutter="15">
            <el-col :sm="12" :lg="6">
                <el-card class="inline-block-card" shadow="never">
                    <div slot="header" class="card-header">访问量</div>
                    <div class="card-main">
                        <div class="card-body">
                            <vue-count-to class="count-value" :start-val="0" :end-val="randEndValue()" :duration="2000"></vue-count-to>
                            <sub>人</sub>
                        </div>
                        <div class="card-footer">
                            <span class="label">总访问量</span>
                            <span class="value">500万</span>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :lg="6">
                <el-card class="inline-block-card" shadow="never">
                    <div slot="header" class="card-header">注册量</div>
                    <div class="card-main">
                        <div class="card-body">
                            <vue-count-to class="count-value" :start-val="0" :end-val="randEndValue()" :duration="2000"></vue-count-to>
                            <sub>人</sub>
                        </div>
                        <div class="card-footer">
                            <span class="label">总注册量</span>
                            <span class="value">300万</span>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :lg="6">
                <el-card class="inline-block-card" shadow="never">
                    <div slot="header" class="card-header">订单量</div>
                    <div class="card-main">
                        <div class="card-body">
                            <vue-count-to class="count-value" :start-val="0" :end-val="randEndValue()" :duration="2000"></vue-count-to>
                            <sub>单</sub>
                        </div>
                        <div class="card-footer">
                            <span class="label">总订单量</span>
                            <span class="value">300万</span>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :sm="12" :lg="6">
                <el-card class="inline-block-card" shadow="never">
                    <div slot="header" class="card-header">销售额</div>
                    <div class="card-main">
                        <div class="card-body">
                            <vue-count-to class="count-value" :start-val="0" :end-val="randEndValue()" :duration="2000"></vue-count-to>
                            <sub>元</sub>
                        </div>
                        <div class="card-footer">
                            <span class="label">总销售额</span>
                            <span class="value">300万</span>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="24">
                <el-card class="block-card" shadow="never">
                    <div slot="header" class="card-header">流量报表</div>
                    <div class="card-main">
                        <el-row :gutter="30">
                            <el-col :sm="24" :lg="18">
                                <div class="charts" ref="chart-1"></div>
                            </el-col>
                            <el-col :sm="24" :lg="6">
                                <div class="charts" ref="chart-2"></div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from "echarts";

import vueCountTo from "vue-count-to";
export default {
    components: {
        vueCountTo,
    },
    mounted() {
        this.renderEcharts("chart-1", {
            title: {
                text: "本周流量报表",
            },
            tooltip: {
                trigger: "axis",
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            legend: {
                data: ["来源1", "来源2", "来源3", "来源4", "来源5"],
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                },
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    name: "来源1",
                    type: "line",
                    stack: "Total",
                    data: [120, 132, 101, 134, 90, 230, 210],
                },
                {
                    name: "来源2",
                    type: "line",
                    stack: "Total",
                    data: [220, 182, 191, 234, 290, 330, 310],
                },
                {
                    name: "来源3",
                    type: "line",
                    stack: "Total",
                    data: [150, 232, 201, 154, 190, 330, 410],
                },
                {
                    name: "来源4",
                    type: "line",
                    stack: "Total",
                    data: [320, 332, 301, 334, 390, 330, 320],
                },
                {
                    name: "来源5",
                    type: "line",
                    stack: "Total",
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                },
            ],
        });
        this.renderEcharts("chart-2", {
            title: {
                text: "来源报表",
                left: "left",
            },
            tooltip: {
                trigger: "item",
            },
            legend: {
                orient: "vertical",
                left: "right",
            },
            series: [
                {
                    name: "来源统计",
                    type: "pie",
                    radius: "50%",
                    data: [
                        { value: 1048, name: "平台1" },
                        { value: 735, name: "平台2" },
                        { value: 580, name: "平台3" },
                        { value: 484, name: "平台4" },
                        { value: 300, name: "平台5" },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                },
            ],
        });
    },
    methods: {
        randEndValue() {
            return Math.floor(Math.random() * 8999 + 1000);
        },
        renderEcharts(ref, option = {}) {
            const el = this.$refs[ref];

            if (el) {
                const myChart = echarts.init(el);
                option && myChart.setOption(option);
                return myChart;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
#dashboard_chart {
    .block-card {
        .card-main {
            .charts {
                height: 360px;
            }
        }
    }
    .inline-block-card {
        margin-bottom: 15px;
        .card-main {
            .card-body {
                height: 50px;
                flex: 1;
                .count-value {
                    font-size: 30px;
                }
            }
            .card-footer {
                border-top: 1px solid #f6f6f6;
                padding-top: 15px;
                font-size: 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: gray;
            }
        }
    }
}
</style>